import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import {
  Input,
  Form,
  Row,
  Col,
  Button,
  Select,
  DatePicker,
  Radio,
  Cascader
} from 'antd'
import Style from './index.css'

const FormItem = Form.Item
const Option = Select.Option
const RangePicker = DatePicker.RangePicker
const RadioGroup = Radio.Group

// const formItemLayout = {
//   labelCol: {
//     sm: { span: 6 }
//   },
//   wrapperCol: {
//     sm: { span: 16 }
//   }
// }

const WIDGETTYPE = {
  INPUT: 'input',
  SELECT: 'select',
  RADIO: 'radio',
  DATE_PICKER: 'datePicker',
  DATE_RANGE_PICKER: 'dateRangePicker',
  CASCADER: 'cascader'
}

class FiltersForm extends PureComponent {
  constructor (props) {
    super(props)
    this.reset = this.reset.bind(this)
    this.handleSearch = this.handleSearch.bind(this)
  }
  reset () {
    const { resetFields } = this.props.form
    resetFields()
    this.props.reset()
  }

  handleSearch () {
    this.props.form.validateFields((e, values) => {
      this.props.search(values)
    })
  }
  render () {
    const {
      form,
      children,
      cols,
      search,
      actions,
      reset,
      ...restProps
    } = this.props
    const { getFieldDecorator } = form
    const hasActionButtons = typeof actions === 'undefined' ? true : actions
    return (
      <Form className={Style['filters-form ant-advanced-search-form']} {...restProps}>
        <Row gutter={24}>
          {cols.map((col, i) => {
            const id = col.id
            const label = col.label || ''
            const placeholder = col.placeholder || ''
            const fieldOptions = col.fieldOptions || {}
            return (
              <Col key={i} span={col.span || 8}>
                <FormItem label={label} labelCol={!col.label ? null : {
                  sm: { span: 6 }
                }} wrapperCol={!col.label ? null : {
                  sm: { span: 16 }
                }}>
                  {/* INPUT */}
                  {col.widget === WIDGETTYPE.INPUT &&
                    getFieldDecorator(id, fieldOptions)(<Input
                      type={col.type || 'text'}
                      placeholder={placeholder}
                    />)}
                  {/* SELECT */}
                  {col.widget === WIDGETTYPE.SELECT &&
                    getFieldDecorator(id, fieldOptions)(<Select {...col.props} placeholder={placeholder}>
                      {col.options.map(option => (
                        <Option value={option.value} key={option.value}>
                          {option.text}
                        </Option>
                      ))}
                    </Select>)}
                  {/* RADIO */}
                  {col.widget === WIDGETTYPE.RADIO &&
                    getFieldDecorator(id, fieldOptions)(<RadioGroup {...col.props}>
                      {col.options.map(option => (
                        <Radio value={option.value} key={option.value}>
                          {option.text}
                        </Radio>
                      ))}
                    </RadioGroup>)}
                  {/* DATE PICKER */}
                  {col.widget === WIDGETTYPE.DATE_PICKER &&
                    getFieldDecorator(id, fieldOptions)(<DatePicker {...col.props} placeholder={placeholder} />)}
                  {/* DATE RANGE PICKER */}
                  {col.widget === WIDGETTYPE.DATE_RANGE_PICKER &&
                    getFieldDecorator(id, fieldOptions)(<RangePicker {...col.props} />)}
                  {/* Cascader */}
                  {col.widget === WIDGETTYPE.CASCADER &&
                    getFieldDecorator(id, fieldOptions)(<Cascader
                      options={col.options}
                      placeholder={placeholder}
                      {...col.props}
                    />)}
                  {col.widget === 'custom' && col.render()}
                </FormItem>
              </Col>
            )
          })}
        </Row>
        {hasActionButtons && (
          <Row gutter={24}>
            <Col span={24} className={Style['filter-actions']}>
              <Button onClick={this.reset}>重置</Button>
              <Button type='primary' onClick={this.handleSearch}>
                查询
              </Button>
              {children}
            </Col>
          </Row>
        )}
      </Form>
    )
  }
}

FiltersForm.propTypes = {
  form: PropTypes.object.isRequired,
  cols: PropTypes.array.isRequired,
  children: PropTypes.node,
  search: PropTypes.func,
  reset: PropTypes.func,
  actions: PropTypes.bool
}

const Filters = Form.create()(FiltersForm)

export default Filters
